<template>
    <div class="quyu">
        <section class="content-header">统计分析&nbsp;/&nbsp;区域用水情况统计</section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-sm-4 clearfix">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker1"
                                    placeholder="YYYY-MM-DD"
                                    v-model="timeData.timeStart"
                                >
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:34px;line-height:34px">--
                            <!-- <span style="display:inline-block;height:34px;line-height:34px"></span> -->
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker2"
                                    placeholder="YYYY-MM-DD"
                                    v-model="timeData.timeEnd"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 clearfix">
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-primary">查询</button>
                        </div>
                        <div class="col-sm-2 col-sm-offset-7">
                            <button type="button" class="btn btn-primary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div class="box" style="width:500px;margin: auto">
                <div class="box-body">
                    <table
                        id="example"
                        class="table table-bordered table-hover"
                        style="font-size:14px;text-align:center"
                    >
                        <thead style="font-weight:700">
                            <tr>
                                <td>片区</td>
                                <td>供水异常</td>
                                <td>排水异常</td>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr v-if="planList.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr>-->
                            <tr v-for="item in list" :key="item.value">
                                <td>{{item.areaNum}}</td>
                                <td>{{item.gsNum}}</td>
                                <td>{{item.psNum}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="margin-top:20px;text-align:center">
                <div style="display:inline-block">
                    <div class="clearfix" style="border:1px solid #cccccc;width:530px;float:left">
                        <div
                            ref="echartContainer1"
                            style="width:100%; height:300px;display:inline-block"
                        ></div>
                    </div>
                    <div class="clearfix" style="border:1px solid #cccccc;width:530px;float:left">
                        <div
                            ref="echartContainer2"
                            style="width:100%; height:300px;display:inline-block"
                        ></div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";
export default {
    data() {
        return {
            timeData: {
                timeStart: utils.nowDate(-7),
                timeEnd: utils.nowDate(0)
            },
            list: [],
            areaname: [],
            gsData: [],
            psData: []
        };
    },
    mounted() {
        this.selectDate1();
        this.selectDate2();
        this.select();
        // this.getList()
    },
    methods: {
        //日期选择
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.timeData.timeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.timeData.timeEnd = ev.target.value;
                });
        },
        getList(callback) {
            this.$api.tongji.ycCount(this.timeData).then(res => {
                if (res.success) {
                    this.list = res.data;
                    for (let i in res.data) {
                        this.areaname.push(res.data[i].areaNum);
                        let obj = {
                            value: res.data[i].gsNum,
                            name: res.data[i].areaNum
                        };
                        this.gsData.push(obj);
                        this.psData.push(obj);
                    }
                    callback();
                }
            });
        },
        //echart图标
        select() {
            let myChart1 = echarts.init(this.$refs.echartContainer1);
            let myChart2 = echarts.init(this.$refs.echartContainer2);
            this.getList(() => {
                myChart1.setOption({
                    title: {
                        text: "供水异常",
                        x: "center"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: "vertical",
                        right: 50,
                        bottom: 20,
                        data: this.areaname
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: "55%",
                            center: ["40%", "50%"],
                            data: this.gsData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                            // label: {
                            //     normal: {
                            //         show: true,
                            //         formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                            //     }
                            // }
                        }
                    ]
                });
                myChart2.setOption({
                    title: {
                        text: "排水异常",
                        x: "center"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: "vertical",
                        right: 50,
                        bottom: 20,
                        data: this.areaname
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: "55%",
                            center: ["40%", "50%"],
                            data: this.psData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }
                    ]
                });
            });
        }
    }
};
</script>

<style>
</style>
